<template>
	<view class="tp-bgf">
		<!-- 头部 S -->
		<view class="tp-pr tp-pd30">
			<image class="home-bg" src="../static/make/home_bg.png" mode=""></image>
			<view class="level_align flex_between tp-pr tp-mt20" @click="goToMakeOrder">
				<view class=" tp-fcF">
					<view class="tp-h98 level_align tp-fw600 tp-ls4" style="font-size: 42rpx;">
						专业定制
					</view>
					<view class="tp-fz30 tp-ls4" style="color: rgba(255,255,255,.8);">
						给您最舒适便捷的旅游体验
					</view>
				</view>
				<uni-icons type="arrowright" size="24" color="#fff"></uni-icons>
			</view>
		</view>
		<!-- 头部 E -->
		<!-- 定制板块 S -->
		<view class="make-box tp-pd30 tp-pr">
			<view class=" tp-bgf tp-bs14" style="border-radius: 20rpx;">
				<view class="tp-h88 tp-fc333 tp-fz30 level_align tp-ls4">
					<view class="make-left  tp-h100 flex-1 center_combo" @click="isTeam = !isTeam" :class="!isTeam ? 'tp-bgf tp-fc tp-fw600' : 'tp-bcF5'">
						个人定制
					</view>
					<view class="make-right tp-h100 flex-1 center_combo" @click="isTeam = !isTeam" :class="isTeam ? 'tp-bgf tp-fc tp-fw600' : 'tp-bcF5'">
						团建定制
					</view>
				</view>
				<view class="flex tp-ptb0lr30">
					<view class="column_align tp-mr20">
						<image class="tp-img40 tp-mt20" src="../static/icon/chufa.png" mode=""></image>
						<view class="line"></view>
						<image class="tp-img40" src="../static/icon/mudi.png" mode=""></image>
					</view>
					<view class="flex flex_column flex-1">
						<view class="tp-h88 level_align flex_between tp-bdbm" @click="pageJumps('./selectCity?type=go')">
							<input class="flex-1" type="text" disabled :value="choosedMakeCity.goCity && choosedMakeCity.goCity" placeholder="请选择出发地" />
							<uni-icons class="" type="arrowright" size="18" color="#999"></uni-icons>
						</view>
						<view class="tp-h88 level_align flex_between tp-bdbm" @click="pageJumps('./selectCity?type=back')">
							<text class="flex-1 tp-fc666 tp-fz24">{{bournText}}</text>
							<!-- <input class="flex-1" type="text" disabled value="" :placeholder="" /> -->
							<uni-icons class="" type="arrowright" size="18" color="#999"></uni-icons>
						</view>
						<view class="level_align  flex_wrap tp-bdbm tp-pt20" v-if="bournlist.length">
							<view class="tag tp-dib tp-ptb0lr20 tp-bgf tp-mb20 tp-mr20 tp-br8" v-for="(item,index) in bournlist" :key="index">
								<view class="level_align">
									<view class="">
										{{item}}
									</view>
									<view class="close-icon level_align" @click="delOne(index)">
										<uni-icons type="closeempty" size="22" color="#999"></uni-icons>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
				<view class="tp-pd30 tp-bbox">
					<view class="tp-ptb0lr50">
						<view class="tp-fcF make-btn tp-bs14 tp-h80 center_combo tp-br40 tp-fz30 tp-ls4" @click="goToMakeOrder">
							免费获取定制方案
						</view>
					</view>
				</view>
				<view class="tp-h98 level_align flex_between tp-ptb0lr30 tp-bcblue" @click="pageJumps('/pagesUser/order/makeOrderList')">
					<view class="level_align">
						<image class="tp-img32 tp-mr20" src="../static/icon/dingzhi.png" mode=""></image>
						<text>定制记录</text>
					</view>
					<uni-icons class="" type="arrowright" size="18" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 定制板块 E-->

		<!-- 流程示意 S -->
		<view class="flex flex_between tp-ptb0lr30">
			<view class="column_align tp-fc666 tp-fz22">
				<image class="tp-img88" src="../static/icon/m1.png" mode=""></image>
				<view class="tp-lh64">
					提交需求单
				</view>
			</view>
			<view class="flex flex-1 flex_between">
				<view class="flex  tp-fc666 tp-fz22" v-for="(item,index) in makeLiuchengList" :key="index">
					<view class="tp-pt20">
						<uni-icons type="arrowright" size="28" color="#EBEBEB"></uni-icons>
					</view>
					<view class="column_align">
						<image class="tp-img88" :src="item.url" mode=""></image>
						<view class="tp-lh64">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 流程示意 E -->

		<!-- 标题块 S -->
		<view class="tp-bgf level_align flex_between tp-pr tp-ptb0lr30 tp-mt30 tp-mb20 tp-h88" @click="pageJumps('../travel/travelHome')">
			<view class="level_align tp-fc333 tp-fz32 tp-fw600">
				<view class="tp-mr20 lan-line"></view>
				<text>热门推荐</text>
			</view>
			<view class="flex-1 level_align flex_end tp-fz24 tp-fc999">
				<view class="flex-1 tp-tr tp-mr15">
					<input type="text" disabled placeholder="查看更多" />
				</view>
				<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
			</view>
		</view>
		<!-- 标题块 E -->

		<!-- 块布局 S -->
		<view class=" tp-ptb0lr30  level_align flex_between flex_wrap">
			<view class="tp-br12 tp-bs14 tp-bgf tp-mb20 tp-bsf5" style="width: 335rpx;" @click="pageJumps('../travel/travelDetail?id=' + item.id + '&title=' + item.travelName)"
			 v-for="(item,index) in list" :key="index">
				<view class="tp-pr">
					<image class="kuai-img" :src="wwwImgUrl + item.travelCover" mode="aspectFill"></image>
					<!-- <text class="img-lable tp-fcF">{{item.travelTypes.length && item.travelTypes[0]}}</text> -->
					<text class="img-lable tp-fcF">{{ item.travelTypes && item.travelTypes.join('、')}}</text>
				</view>
				<view class="flex flex_column tp-ptb0lr20 tp-pb20">
					<view class="ellispsis2 tp-lh40 tp-fc333 tp-fz28 tp-fw600 tp-h80">
						{{item.travelName}}
					</view>
					<view class="tp-mt10 level_align tp-w100 tp-ofh">
						<view class="quan-tag tp-wsn tp-lh40 tp-mr10 tp-fc tp-bgf tp-br8 tp-border1 tp-fz22" v-for="(it,ind) in item.travelLabels"
						 :key="ind">
							{{it}}
						</view>
					</view>
					<view class="level_align flex_between tp-mt10">
						<view class="tp-fz24 tp-fc999">
							{{item.sales}}人已买
						</view>
						<text class="tp-yellow">{{item.travelScore}}分</text>
					</view>
					<view class="tp-fz24 tp-red tp-fw600">
						￥<text class="tp-fz36">{{item.currentPrice}}</text>起
					</view>
				</view>

			</view>
		</view>
		<!-- 块布局 E -->
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isTeam: false, // true 团队  false 个人
				makeLiuchengList: [{
					name: '免费发送方案',
					url: '../static/icon/m2.png'
				}, {
					name: '沟通确认行程',
					url: '../static/icon/m3.png'
				}, {
					name: '签约出行',
					url: '../static/icon/m4.png'
				}],
				list: [], // 页面列表
				bournlist: [], //目的地
				choosedMakeCity: {}, // 选择的城市
				pageNum: 1, // 当前页码,请设置初始值
				pageSize: 10, // 每页显示数量,请设置初始值
				last_page: null, // 总页数
				loadMoreText: "加载中...",
				showLoadMore: false, // 加载更多

			};
		},
		onLoad() {
			this.$store.commit('delChoosedMakeCity')
		},
		onShow() {
			this.choosedMakeCity = this.$store.getters.getChoosedMakeCity
			this.bournlist = this.choosedMakeCity && this.choosedMakeCity.backCity || []
			this.getList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.pageNum = 1
			this.list = []
			this.loadMoreText = "加载中..."
			this.getList()
		},
		// 上拉触底
		onReachBottom() {
			if (this.pageNum < this.last_page) {
				this.showLoadMore = true;
				this.pageNum++
				this.getList()
			} else {
				this.loadMoreText = "已没有更多数据!"
			}
		},
		computed:{
			bournText(){
				return this.bournlist.length === 0 ? '请选择目的地（可多选）' : '继续选择目的地（可多选）'
			}
		},
		methods: {
			// 获取页面旅游推荐
			getList() {
				let param = {
					city: this.choosedMakeCity.goCity || '',
				}
				this.$http.post(this.$api.travelGroupList + '?pageNum=' + this.pageNum + '&pageSize=' + this.pageSize, param).then(
					res => {
						uni.stopPullDownRefresh();
						this.showLoadMore = false;
						if (res.code === 200) {
							this.last_page = res.data.pageTotal
							res.data.result.map(item => {
								let arr = item.travelLabels,
									brr = [];
								if (item.travelLabels && item.travelLabels.length && item.travelLabels.length > 3) {
									for (let i = 0; i < 2; i++) {
										brr.push(arr[i])
									}
									item.travelLabels = brr
								}
							})
							if (this.pageNum > 1) {
								this.list = this.list.concat(res.data.result);
							} else {
								this.list = res.data.result
							}

						}
					})
			},
			// 去提交页面
			goToMakeOrder() {
				if (!this.choosedMakeCity.goCity) {
					return uni.showToast({
						title: '请选择出发城市',
						icon: 'none'
					})
				}
				if (!this.bournlist.length) {
					return uni.showToast({
						title: '请选择目的地城市',
						icon: 'none'
					})
				}
				uni.navigateTo({
					url: './makeOrder?isTeam=' + this.isTeam
				})
			},
			// 删除单个记录
			delOne(index) {
				this.bournlist.splice(index, 1)
				this.$store.commit('upChoosedMakeCity', {
					backCity: this.bournlist,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.home-bg {
		width: 750rpx;
		height: 320rpx;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}

	.make-box {
		z-index: 20;

		.make-left {
			border-radius: 20rpx 0px 20rpx 0px;
		}

		.make-right {
			border-radius: 0px 20rpx 0px 20rpx;
		}

		.line {
			width: 2rpx;
			height: 55rpx;
			background: #EBEBEB;
			border-radius: 1rpx;
		}

		.make-btn {
			background: linear-gradient(90deg, #00B4FF, #10DAFF);
		}
	}

	.img-lable {
		position: absolute;
		top: 0;
		left: 0;
		padding: 6rpx;
		background: rgba(0, 0, 0, .3);
		color: rgba(255, 255, 255, .6);
		border-radius: 12rpx 0px 12rpx 0px;
	}

	.quan-tag {
		display: inline-block;
		padding: 0 6rpx;
		border-color: $tc;
	}

	.kuai-img {
		width: 335rpx;
		height: 200rpx;
		border-radius: 12rpx 12rpx 0px 0px;
	}

	.tag {
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		border: 2rpx solid #ccc;
		display: inline-block;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);

		.close-icon {
			margin-left: 20rpx;
		}
	}
</style>
